<template>
  <div
    class="
      min-h-screen
      bg-gradient-to-br
      from-gray-900
      to-black
      flex flex-col
      items-center
      p-4
      sm:p-6
      md:p-8
    "
  >
    <!-- 404 主容器 -->
    <div class="w-full max-w-md text-center">
      <!-- 404 数字动画 -->
      <div class="relative mb-8">
        <div class="text-[120px] font-extrabold text-gray-700 relative">
          404
          <div class="absolute inset-0 flex items-center justify-center">
            <div
              class="w-32 h-32 rounded-full bg-primary/20 animate-ping"
            ></div>
          </div>
        </div>
        <div
          class="
            absolute
            -top-6
            -right-6
            w-16
            h-16
            bg-primary
            rounded-full
            flex
            items-center
            justify-center
            text-xl
            font-bold
            transform
            rotate-12
          "
        >
          啊哦!
        </div>
      </div>

      <!-- 标题和描述 -->
      <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold text-white mb-4">
        页面未找到
      </h1>
      <p class="text-gray-300 text-lg mb-8">
        抱歉，您查找的页面不存在或已被移动。
      </p>

      <!-- 可能的原因 -->
      <div
        class="
          bg-gray-800
          rounded-lg
          shadow-lg
          p-6
          mb-8
          transform
          transition-all
          hover:shadow-xl
          border border-gray-700
        "
      >
        <h2 class="text-lg font-semibold text-white mb-4">可能的原因:</h2>
        <ul class="text-left space-y-2 text-gray-300">
          <li class="flex items-start">
            <i class="fa fa-times-circle text-red-500 mt-1 mr-2"></i>
            <span>URL可能不正确</span>
          </li>
          <li class="flex items-start">
            <i class="fa fa-times-circle text-red-500 mt-1 mr-2"></i>
            <span>页面可能已被删除</span>
          </li>
          <li class="flex items-start">
            <i class="fa fa-times-circle text-red-500 mt-1 mr-2"></i>
            <span>地址中有拼写错误</span>
          </li>
        </ul>
      </div>

      <!-- 操作按钮 -->
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <button
          @click="goToHome"
          class="
            px-6
            py-3
            bg-blue-600
            hover:bg-blue-700
            font-medium
            rounded-lg
            shadow-lg
            transition-all
            transform
            hover:-translate-y-1
            focus:outline-none
            focus:ring-2
            focus:ring-blue-500
            focus:ring-opacity-50
            text-white
            border border-blue-500
          "
        >
          <i class="fa fa-home mr-2"></i>返回城市体检页面
        </button>
      </div>
    </div>

    <!-- 页脚 -->
    <footer class="mt-12 text-gray-400 text-sm">
      &copy; {{ new Date().getFullYear() }} 城市体检. 版权所有.
    </footer>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { onMounted } from "vue";

// 初始化路由
const router = useRouter();

// 导航到首页
const goToHome = () => {
  router.push("/");
};

// 返回上一页
const goToBack = () => {
  window.history.back();
};

// 页面加载动画效果
onMounted(() => {
  // 添加页面进入动画类
  document.body.classList.add("page-transition");

  // 清理动画类
  return () => {
    document.body.classList.remove("page-transition");
  };
});
</script>

<style scoped>
/* 自定义动画和过渡效果 */
.page-transition {
  transition: opacity 0.3s ease-in-out;
}

/* 扩展 Tailwind 工具类 */
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}
</style>